"use client"

import { View, Text, StyleSheet, Modal, Pressable, Platform } from "react-native"
import { theme } from "../../constants/theme"
import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated"
import { useEffect } from "react"
import Slider from "@react-native-community/slider"

interface UnitSettingsModalProps {
    visible: boolean
    onClose: () => void
    settings: {
        translationFontSize: number
        moduleFontSize: number
    }
    onSettingsChange: (settings: {
        translationFontSize?: number
        moduleFontSize?: number
    }) => void
}

export function UnitSettingsModal({ visible, onClose, settings, onSettingsChange }: UnitSettingsModalProps) {
    const translateY = useSharedValue(300)
    const opacity = useSharedValue(0)

    useEffect(() => {
        if (visible) {
            opacity.value = withTiming(1, { duration: 200 })
            translateY.value = withSpring(0, {
                damping: 20,
                stiffness: 90,
            })
        } else {
            opacity.value = withTiming(0, { duration: 200 })
            translateY.value = withSpring(300, {
                damping: 20,
                stiffness: 90,
            })
        }
    }, [visible, opacity, translateY])

    const backdropStyle = useAnimatedStyle(() => ({
        opacity: opacity.value,
    }))

    const modalStyle = useAnimatedStyle(() => ({
        transform: [{ translateY: translateY.value }],
    }))

    return (
        <Modal visible={visible} transparent animationType="none">
            <View style={styles.container}>
                <Animated.View style={[styles.backdrop, backdropStyle]}>
                    <Pressable style={styles.backdropPressable} onPress={onClose} />
                </Animated.View>

                <Animated.View style={[styles.modal, modalStyle]}>
                    <View style={styles.handle} />

                    <View style={styles.content}>
                        <Text style={styles.title}>学习设置</Text>

                        <View style={styles.settingItem}>
                            <Text style={styles.settingLabel}>翻译字号：</Text>
                            <Slider
                                style={styles.slider}
                                minimumValue={12}
                                maximumValue={30}
                                step={2}
                                value={settings.translationFontSize}
                                onValueChange={(value) => onSettingsChange({ translationFontSize: value })}
                                minimumTrackTintColor={theme.colors.primary.default}
                                maximumTrackTintColor={theme.colors.neutral.lightGray}
                                thumbTintColor={theme.colors.primary.default}
                            />
                            <Text style={styles.valueText}>{Math.round(settings.translationFontSize)}</Text>
                        </View>

                        <View style={styles.settingItem}>
                            <Text style={styles.settingLabel}>模块字号：</Text>
                            <Slider
                                style={styles.slider}
                                minimumValue={12}
                                maximumValue={30}
                                step={2}
                                value={settings.moduleFontSize}
                                onValueChange={(value) => onSettingsChange({ moduleFontSize: value })}
                                minimumTrackTintColor={theme.colors.primary.default}
                                maximumTrackTintColor={theme.colors.neutral.lightGray}
                                thumbTintColor={theme.colors.primary.default}
                            />
                            <Text style={styles.valueText}>{Math.round(settings.moduleFontSize)}</Text>
                        </View>
                    </View>
                </Animated.View>
            </View>
        </Modal>
    )
}

const styles:any = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "flex-end",
    },
    backdrop: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    backdropPressable: {
        flex: 1,
    },
    modal: {
        backgroundColor: theme.colors.neutral.white,
        borderTopLeftRadius: theme.borderRadius.extraLarge,
        borderTopRightRadius: theme.borderRadius.extraLarge,
        paddingBottom: Platform.OS === "ios" ? 34 : 24,
    },
    handle: {
        width: 32,
        height: 4,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: 2,
        alignSelf: "center",
        marginTop: theme.spacing.md,
    },
    content: {
        padding: theme.spacing.xl,
    },
    title: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.xl,
    },
    settingItem: {
        marginBottom: theme.spacing.xl,
    },
    settingLabel: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
        marginBottom: theme.spacing.sm,
    },
    slider: {
        width: "100%",
        height: 40,
    },
    valueText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        textAlign: "right",
        marginTop: 4,
    },
})

